<template>
  <view class="container">
    <view>{{ props.username }}</view>
    <button @click="changeName">修改username</button>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, defineProps, defineEmits } from "vue";
const props = defineProps({
  username: {
    required: true,
    default: "",
    type: String,
  },
});

const emit = defineEmits(["changeName"]);
const changeName = function () {
  emit("changeName", "李四");
};
</script>

<style style="less" scoped>
.container {
  background: yellowgreen;
  height: 400rpx;
}
</style>
